<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import router from '@/router/index.js';
import { getMsgList } from '@/api/getData.js';
import { setStorage } from "@/utils/localStorage.js";
import index from "vuex";
import Modal from "@/views/message/MmessageWrite.vue"
import {useRoute} from "vue-router";
import MessageWrite from "@/views/message/MmessageWrite.vue";

// 响应式数据
const tableData = ref([]);
let currentPage = ref(1); // 当前页数
let pageSize = ref(5); // 每页显示条数
let total = ref(0); // 数据总条数
const isModalOpen = ref(false);

// 使用 onMounted 钩子函数获取数据
onMounted(() => {
  getMsgData();

});

// 获取消息列表数据
const getMsgData = async () => {
  const response = await getMsgList();
  tableData.value = response.datas; // 更新表格数据
  total.value = response.total; // 更新数据总条数
  console.log( tableData.value);
};



// 导航到消息阅读页面
const navigateToMessage = (row) => {
console.log('路由参数0',row.message.messageId);
setStorage("messageViewData",JSON.stringify(row));
  router.push({
    name: 'MessageRead',
    params: { messageId: row.message.messageId },
    query: { ...row },

  });
};
const openModal = () =>{
  isModalOpen.value = true;
}

const closeModal = () =>{
  isModalOpen.value = false;
  // 可选的路由导航

}

</script>





<template>

  <div class="container ">
    <div class="hheader">
      <div class="header">
        <img src="@/assets/Message/list/board_title.gif" width="115" height="30" alt="Board Title" align="left">
        <!-- Board title copy is commented out in original -->
        <img src="@/assets/Message/list/board_title_image.gif" width="178" height="88" alt="Board Title Image">
        <!-- < img src="../../../assets/Message/list/board_title_copy.gif" width="556" height="15" alt="Board Title Copy"> -->
      </div>

      <div class="board-title" style="flex:1 ;width: 100%">

        <img src="@/assets/Message/list/board_title_top_copy.gif" width="342" height="56" alt="Board Title Top Copy">
      </div>
    </div>
    <div>
      <table width="100%" border="0" cellspacing="3" cellpadding="0">
        <tr style="background-color: #000000">
          <td width="10%" height="1">
            <div align="center"></div>
          </td>
          <td width="50%" height="1"></td>
          <td width="10%" height="1">
            <div align="center"></div>
          </td>
          <td width="10%" height="1">
            <div align="center"></div>
          </td>
          <td width="10%" height="1">
            <div align="center"></div>
          </td>
          <td width="10%" height="1">
            <div align="center"></div>
          </td>
        </tr>
      </table>
    </div>
    <div class="votetable" >
      <table class="board-table">
        <thead>
        <tr style="display: flex">
          <th style="flex: 1"><img src="@/assets/Message/list/msgId.png" width="40" height="15" alt="On"></th>
          <th style="flex: 1"><img src="@/assets/Message/list/senId.png" width="40" height="12" alt="Subject"></th>
          <th style="flex: 1"><img src="@/assets/Message/list/recId.png" width="32" height="10" alt="Name"></th>
          <th style="flex: 1"><img src="@/assets/Message/list/message1.png" width="16" height="10" alt="Hit"></th>
          <th style="flex: 1"><img src="@/assets/Message/list/type.png" width="25" height="10" alt="Date"></th>
          <th style="flex: 1"><img src="@/assets/Message/list/recent.png" width="19" height="10" alt="File"></th>
        </tr>
        </thead>

      </table>
      <div>
          <div>
            <button  @click="openModal">写留言</button>
            <MessageWrite
              :is-modal-open="isModalOpen"
              @closeModal="closeModal"
            v-if="isModalOpen"/>
            <button @click="closeModal">Close</button>
          </div>

        <el-table
            :data="tableData"
            :row-height="50"
            :virtual-scroll="false"
            border
            style="width: 100%; height: 400px"
        >
          <el-table-column label="信息 ID" prop="message.messageId">
            <template v-slot="scope">
              <div
                  class="cell-content"
                  style="flex: 1; cursor: pointer;"
                  @click="navigateToMessage(scope.row )">
                <span>{{ scope.row.message.messageId }}</span>
              </div>
            </template>
          </el-table-column>
          <!-- 其他列的配置类似 -->
          <el-table-column label="发送者" prop="sender.username">
            <template v-slot="scope">
              <div class="cell-content" style="flex: 1"><span>{{ scope.row.sender.username }}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="接收者" prop="receiver.username">
            <template v-slot="scope">
              <div class="cell-content" style="flex: 1"><span>{{ scope.row.receiver.username }}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="文本内容" prop="message.content">
            <template v-slot="scope">
              <div class="cell-content" style="flex: 1"><span>{{ scope.row.message.content }}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="文本类型" prop="message.contentType">
            <template v-slot="scope">
              <div class="cell-content" style="flex: 1"><span>{{ scope.row.message.contentType }}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="发送时间" prop="message.sentTime">
            <template v-slot="scope">
              <div class="cell-content" style="flex: 1"><span>{{ scope.row.message.sentTime }}</span></div>
            </template>
          </el-table-column>

        </el-table>

        <template slot-scope="scope">
              <div class="cell-content" ><img src="@/assets/Message/list/image_01.gif" alt="">

              </div>

            </template>


        <el-pagination>
            v-model:currentPage="currentPage"
            :page-size="pageSize"
            :total="total">
        </el-pagination>


      </div>


    </div>
    <div class="lastb">
      <div class="pagination">
        <img src=" @/assets/Message/list/image_next.gif" width="28" height="34" alt="Next">
        <div class="page-numbers">
          <img src="@/assets/Message/list/next.gif" width="35" height="11" alt="Next Page">
          12345678910
          <img src="@/assets/Message/list/prev.gif" width="35" height="11" alt="Previous Page">
        </div>
      </div>

      <div class="footer">
        <img src="@/assets/Message/list/image_home.gif" width="32" height="39" alt="Home">
        <img src="@/assets/Message/list/search.gif" width="30" height="37" alt="Search">
        <img src="@/assets/Message/list/list.gif" width="28" height="36" alt="List">
      </div>
    </div>
  </div>
</template>

<style scoped>
.hheader{
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.container {
  width: 100%;
  margin: 0 auto;
  height: 85vh;
  background-color: #FFFFFF;
  flex: 1;

}

.header {
  text-align: center;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */

}

.board-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  margin: 20px 0;
}

.board-table {
  width: 100%;
  border-collapse: collapse;
}

.board-table th,
.board-table td {
  text-align: center;
  padding: 10px;
  background-color: #CCCCCC;
}

.cell-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/Message/list/surface.gif');
  height: 20px;
  padding: 0 10px;
}

.footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.lastb{
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>